<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/frm_base.css}" />
    <script th:src="@{/js/jquery-3.5.1.js}"></script>
</head>
<body>
<div class="main">
    <div class="container head">
        <form action="" class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="searchValue" autocomplete="off" placeholder="请输入学生姓名" class="layui-input">
                </div>
                <div class="layui-form-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchBtn">搜索</button>
                </div>
            </div>
        </form>
    </div>
    <hr class="layui-bg-green">
    <div class="container content">
        <table class="layui-hide" id="xjApply" lay-filter="xjApply"></table>
    </div>
</div>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        {{#  if(d.status == 0){ }}
        <button class="layui-btn layui-btn-sm" lay-event="sure">批准</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="reject">驳回</button>
        {{#  }  }}

    </div>
</script>



<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(['element', 'layer', 'form', 'table'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table;;

        var flag = 'add';

        initTable();


        // 搜索提交
        form.on('submit(searchBtn)', function (data) {
            search(data.field) // data.field是一个js对象
            return false;
        })

        //监听工具条
        table.on('tool(xjApply)', function (obj) {
            var data = obj.data; //获得当前行数据
            var param = {id:data.id,types:data.types,stuId:data.stuId}
            var layEvent = obj.event;
            if (layEvent === 'sure') {
                param.status = 1
            } else if (layEvent === 'reject') {
                param.status = 2
            }
            update(param)
        });

        // 更新、新增
        function update(param) {
            var url = '/ssms/xjApply/update';
            $.post(url,param,function (res) {
                if (res.code == 200) {
                    reloadTable();
                } else {
                    layer.msg(res.msg, {icon: 5, time: 1000})
                }
            })
        }

        // 初始化表格
        function initTable() {

            table.render({
                elem: '#xjApply'
                , url: '/ssms/xjApply/list'
                // , width:700
                , cols: [[
                    {type:'numbers'}
                    , {field: 'stu', width: 120, title: '姓名',templet:'<div>{{d.stu.username}}</div>'}
                    , {field: 'stu', width: 120, title: '学号',templet:'<div>{{d.stu.code}}</div>'}
                    , {field: 'stu', width: 120, title: '班级',templet:'<div>{{d.stu.clazz.clazzName}}</div>'}
                    , {field: 'subjectName', title: '专业'}
                    , {field: 'types',width:150, title: '申请内容',templet:function (d){
                            if(d.types == 1) return '申请退学'
                            if(d.types == 2) return '申请休学'
                        }}
                    , {field: 'applyDate',width:180, title:'申请时间'}
                    , {field: 'status', width: 100, title: '状态',templet:function (d) {
                            if(d.status == 0) return '<span class="layui-badge layui-bg-blue">待审核</span>'
                            if(d.status == 1) return '<span class="layui-badge layui-bg-green">已通过</span>'
                            if(d.status == 2) return '<span class="layui-badge layui-bg-red">不通过</span>'
                        }}
                    , {title: '操作', toolbar: '#toolbar', width: 150}
                ]]
                , page: true
            });
        }

        // 表格搜索
        function search(fieldObj) {
            console.log(fieldObj)
            table.reload('xjApply', {
                url: '/ssms/xjApply/list'
                , where: fieldObj
                , page: {
                    curr: 1
                }
            });
        }
        // 重新加载
        function reloadTable() {
            table.reload('xjApply', {
                url: '/ssms/xjApply/list',
            });
        }
    });
</script>
</body>
</html>